<template>
    <div class="app-container">
      <div style="padding: 20px 20px 0 20px;">
        被分配用户：{{ $route.query.name }}
        <br>
        学号: {{ $route.query.username }}
      </div>
      <el-tree
        style="margin: 20px 0"
        ref="tree"
        :data="sysDeptList"
        :props="defaultProps"
        :filter-node-method="filterNode"
        class="filter-tree"
        show-checkbox
        node-key="id"
        highlight-current
        default-expand-all
        check-on-click-node
        @check-change="selectTreeNode"/>
      <div style="padding: 20px 20px;">
        <el-button :loading="loading" type="primary" icon="el-icon-check" size="mini" @click="save">保存</el-button>
        <el-button @click="$router.push('/system/sysUser')" size="mini" icon="el-icon-refresh-right">返回</el-button>
      </div>
    </div>
  </template>
  <script>
    import api from '@/api/system/dept'
    import uapi from '@/api/system/user'
    export default {
      name: 'roleAuth',
  
      data() {
        return {
          filterText: '',
          searchForm: {},
          treeOption: {
            nodeKey: 'id',
            addBtn: false,
            menu: false,
            props: {
              label: 'name',
              value: 'id'
            }
          },
          
          selectTreeOption: {},
          loading: false, // 用来标识是否正在保存请求中的标识, 防止重复提交
          sysDeptList: [], // 所有
          defaultProps: {
            children: 'children',
            label: 'name'
          },
        };
      },
  
      created() {
        this.fetchData()
      },
  
      methods: {
        /*
        初始化
        */
        fetchData() {
          const userId = this.$route.query.id
          api.toAssign(userId).then(result => {
            debugger
            const sysDeptList = result.data
            this.sysDeptList = sysDeptList
            const checkedId = this.getCheckedId(sysDeptList)
            console.log('getPermissions() checkedId', checkedId)
            this.$refs.tree.setCheckedKeys(checkedId)
          })
        },
  
        /*
        得到被选中的id
        */
        getCheckedId (auths, initArr = []) {
          return auths.reduce((pre, item) => {
            if (item.select) {
              pre.push(item.id)
            } else if (item.children) {
              this.getCheckedId(item.children, initArr)
            }
            return pre
          }, initArr)
        },
        selectTreeNode(data, checked, indeterminate) {
          if (checked) {
            if (data.children.length == 0) {
              this.selectTreeOption = data
            }
            const arr = [data.id]
            this.$refs.tree.setCheckedKeys(arr)
          }
        },
        filterNode(value, data) {
          if (!value) return true
          return data.name.indexOf(value) !== -1
        },
        /*
        保存权限列表
        */
        save() {
          //获取到当前子节点
          const CheckedNodes = this.$refs.tree.getCheckedNodes();
          let idList = CheckedNodes.map(node => node.id);
          let id = idList[idList.length-1]
          // console.log(id)
          this.loading = true
          
          uapi.saveClass(this.$route.query.id,id).then(result => {
            this.loading = false
            this.$message.success(result.$message || '分配班级成功')
            this.$router.push('/system/sysUser');
          })
        }
      }
    };
  </script>